<template>
  <div
    class="complication-picture"
    :style="{ backgroundImage: 'url(' + pic.imgUrl + ')' }"
    @click="handleClick"
  >
    <p class="text">
      {{ pic.detail }}
      <small v-if="total != null" style="color: white"> {{ "[ " + total + " 张 ]" }} </small>
    </p>
  </div>
</template>

<script>
export default {
  name: "ImageCard",
  props: {
    pic: {
      type: Object, // 图片对象
      required: true,
      validator: function (value) {
        // 自定义验证逻辑
        return typeof value === "object" && value !== null;
      },
    },
    total: {
      type: Number, // 标签数量
      required: false,
    },
  },
  methods: {
    // 搜索图片
    handleClick() {
      this.$router.push({
        path: "/search",
        query: {
          tag: this.pic.tag,
          desc: false
        },
      });
    },
  }
};
</script>

<style scoped>
.complication-picture {
  width: 400px;
  height: 230px;
  border-radius: 10px;
  margin-top: 20px;
  margin-inline: 10px;
  background-size: cover;
}
.text {
  display: inline-block;
  height: 100%;
  color: white;
  text-indent: 2em;
  bottom: -180px;
  position: relative;
  font-weight: 600;
}
</style>